<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>table</title>
		<script src="../../../dist/paged.polyfill.js"></script>

		<style>
			.base-footer {
				text-transform: uppercasse;
				font-size: 12px;
			}

			.base-header {
				height: 100px;
				text-align: start;
				position: relative;
			}

			.base-title {
				position: absolute;
				left: 295px;
				top: 38px;
				font-size: 16px;
				font-weight: 500;
				line-height: 19px;
			}

			.base-evaluation {
				width: 100%;
				border-collapse: collapse;
			}

			.base-evaluation thead tr {
				background: #ebedf1;
			}

			.base-evaluation thead tr th {
				text-align: center;
			}

			.base-evaluation tr,
			.base-evaluation td {
				/* break-inside: avoid; */
			}

			.base-evaluation th,
			.base-evaluation td {
				font-size: 12px;
				border: 1px solid #dcdcdc;
				padding: 1em;
			}

			@page {
				size: A4 portrait;
				margin: 30px;
				margin-top: 130px;
			}

			.mate-pro {
				page: matePro;
			}

			.mate-pro-header {
				position: running(mateproHeaderRunning);
			}

			.mate-pro-footer {
				position: running(mateproFooterRunning);
			}

			@page matePro {
				@top-center {
					content: element(mateproHeaderRunning);
				}

				@bottom-center {
					content: element(mateproFooterRunning);
				}

				@bottom-left {
					content: counter(page) 'page, total:' counter(pages) 'pages';
				}
			}
		</style>
	</head>

	<body>
		<section class="mate-pro">
			<header class="base-header mate-pro-header">
				<span class="base-title">HUAWEI Mate 60 Pro</span>
			</header>

			<footer class="base-footer mate-pro-footer">footer mate 60 pro</footer>
			<table class="base-evaluation">
				<thead>
					<tr>
						<th rowspan="2" style="width: 6%">序号<br />Item</th>
						<th rowspan="2" style="width: 51%">项目内容<br />Description</th>
						<th colspan="5">Hour</th>
					</tr>
					<tr>
						<th>Normal</th>
						<th>O/T 1</th>
						<th>O/T 2</th>
						<th colspan="2">Travel/Waiting</th>
					</tr>
				</thead>

				<tbody>
					<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
						<td>5</td>
						<td>6</td>
						<td>7</td>
					</tr>
					<tr>
						<td>2</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>3</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>4</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>5</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>6</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>7</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>8</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>9</td>
						<td></td>
						<td colspan="5"></td>
					</tr>

					<tr>
						<td>1</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>2</td>
						<td></td>
						<td colspan="5"></td>
					</tr>

					<tr>
						<td>3</td>
						<td></td>
						<td colspan="5"></td>
					</tr>
					<tr>
						<td>4</td>
						<td></td>
						<td colspan="5">
							<table>
								<thead>
									<tr>
										<th class="opacity"></th>
										<th>总时</th>
										<th>费率</th>
										<th>人数</th>
										<th>合计</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td style="width: 29%; padding: 0 8px 0 0">1</td>
										<td>2</td>
										<td>3</td>
										<td>4</td>
										<td>5</td>
									</tr>
									<tr>
										<td class="opacity"></td>
										<td colspan="3">Sub-Total</td>
										<td>1</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr>
						<td>5</td>
						<td></td>
						<td colspan="5"></td>
					</tr>

					<tr>
						<td>6</td>
						<td>fffff</td>
						<td colspan="5">
							收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服
							收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服
							收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服
							收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服
							收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服收到防辐射服
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
							反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发发发发反反复复反反复复凤飞飞发发发发发发发
						</td>
					</tr>
				</tbody>
			</table>
		</section>
	</body>
</html>
